<template>
  <div class="home">
    <div class="bar-btn">
      <van-icon name="wap-nav"
      @click="changeShowSheet"/>
    </div>
    <van-tabs v-model="activeName" fixed>
       <van-tab v-for="item in channelList" :key='item.id' :title="item.name" :name="item.name">
         <article-list :id="item.id" @handle='handle'></article-list>
       </van-tab>
    </van-tabs>

    <!-- 投诉面板 -->
    <van-popup v-model="showList">
      <more-action ref="moreAction" @dislike='dislike' @report='report'></more-action>
    </van-popup>
    <!-- 频道修改面板 -->
     <van-action-sheet v-model="showSheet" title="频道管理">
      <action-sheet
      :channelList='channelList'
      :optionalChannels='optionalChannels'
      :active='activeName'
      @changeChannel="changeChannel"
      @addMyChannel='addMyChannel'
      @delMyChannel='delMyChannel'
      ref="actionsheet"
      ></action-sheet>
    </van-action-sheet>

  </div>
</template>

<script>
import { reqDislikeArticle, reportArticle, reqAddMyChannel, reqDelMyChannel } from '@/api/channels'
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction.vue'
import ActionSheet from './actionSheet.vue'
export default {
  components: {
    ArticleList,
    MoreAction,
    ActionSheet
  },
  data () {
    return {
      activeName: '推荐',
      showList: false,
      articleId: '',
      showSheet: false
    }
  },
  computed: {
    ...mapState('channels', ['channelList']),
    ...mapGetters('channels', ['optionalChannels'])
  },
  created () {
    this.GetMyChannels()
    this.GetAllChannels()
  },
  methods: {
    ...mapActions('channels', ['GetMyChannels', 'GetAllChannels']),
    ...mapMutations('channels', ['addMyChannels', 'delMyChannels']),
    handle (id) {
      this.showList = true
      this.articleId = id
      this.$nextTick(() => {
        this.$refs.moreAction.isShow = true
      })
    },
    // 不感兴趣
    async dislike () {
      await reqDislikeArticle(this.articleId)
      this.showList = !this.showList
      // 非父子传信--事件总线
      const index = this.channelList.findIndex(item => item.name === this.activeName)
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channelList[index].id
      }
      this.$eventBus.$emit('del-article', eventObj)
      this.$toast.success('添加不感兴趣成功')
    },
    // 举报文章
    async report (type) {
      await reportArticle(this.articleId, type, '')
      this.showList = !this.showList
      const index = this.channelList.findIndex(item => item.name === this.activeName)
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channelList[index].id
      }
      this.$eventBus.$emit('del-article', eventObj)
      this.$toast.success('举报成功')
    },
    // 切换频道
    changeChannel (name) {
      this.activeName = name
      this.showSheet = false
    },
    changeShowSheet () {
      this.showSheet = !this.showSheet
      this.$nextTick(() => { this.$refs.actionsheet.flag = false })
    },
    // 添加我的频道
    async addMyChannel (item) {
      this.addMyChannels(item)
      const channels = this.channelList.map((item, index) => {
        return { id: item.id, seq: index }
      })
      await reqAddMyChannel(channels)
    },
    // 删除我的频道
    async delMyChannel (item) {
      this.delMyChannels(item)
      const channels = this.channelList.map((item, index) => {
        return { id: item.id, seq: index }
      })
      await reqDelMyChannel(channels)
    }
  }
}
</script>

<style lang='scss' scoped>
.home {
  height: 100vh;
  padding-top: 90px;
  padding-bottom: 50px;
  box-sizing: border-box;
  ::v-deep {
    .van-tabs__line {
      background-color: #3196fa;
    }
    // 定位的导航
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      top: 46px;
      right:30px
    }

    .van-tabs {
      height: 100%;
      // 内容部分
      .van-tabs__content {
        height: 100%;
        // 每个面板的容器
        .van-tab__pane {
          height: 100%;
        }
      }
    }
  }
}
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index:1;
  .van-icon-wap-nav{
    font-size: 20px;
  }
}

</style>
